<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>费曼学习平台</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>🧠 费曼学习平台</h1>
        <nav>
            <button id="homeBtn" class="nav-btn active">首页</button>
            <button id="userBtn" class="nav-btn">个人中心</button>
            <button id="knowledgeBtn" class="nav-btn">知识点</button>
            <button id="registerBtn" class="nav-btn">用户注册</button>
        </nav>
    </header>

    <main>
        <!-- 首页内容 -->
        <section id="home" class="page active">
            <div class="welcome-card">
                <h2>欢迎来到费曼学习平台</h2>
                <p>通过费曼学习法，让知识更好地被理解和记忆</p>

                <!-- Hello World 功能区域 -->
                <div class="hello-world-section">
                    <button id="helloWorldBtn" class="hello-world-btn">🌟 打印 Hello World</button>
                    <div id="helloWorldOutput" class="hello-world-output"></div>
                </div>

                <div class="feature-grid">
                    <div class="feature-item">
                        <h3>🎯 智能出题</h3>
                        <p>AI根据知识点自动生成练习题</p>
                    </div>
                    <div class="feature-item">
                        <h3>🎤 音频转文字</h3>
                        <p>录制讲解音频，自动转换为文字</p>
                    </div>
                    <div class="feature-item">
                        <h3>📊 智能评分</h3>
                        <p>AI评估你的理解程度</p>
                    </div>
                    <div class="feature-item">
                        <h3>🌐 知识图谱</h3>
                        <p>3D可视化知识点关系</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 用户信息页面 -->
        <section id="user" class="page">
            <div class="user-card">
                <h2>个人中心</h2>
                <div id="userInfo" class="loading">加载中...</div>
            </div>
        </section>

        <!-- 知识点页面 -->
        <section id="knowledge" class="page">
            <div class="knowledge-card">
                <h2>知识点管理</h2>
                <div id="knowledgeList" class="loading">加载中...</div>
            </div>
        </section>

        <!-- 用户注册页面 -->
        <section id="register" class="page">
            <div class="register-card">
                <h2>🚀 用户注册</h2>
                <p class="register-subtitle">加入费曼学习平台，开启你的学习之旅</p>
                
                <form id="registerForm" class="register-form">
                    <div class="form-group">
                        <label for="username">👤 用户名</label>
                        <input type="text" id="username" name="username" required 
                               placeholder="请输入用户名（3-20个字符）" 
                               minlength="3" maxlength="20">
                        <span class="field-error" id="usernameError"></span>
                    </div>
                    
                    <div class="form-group">
                        <label for="email">📧 邮箱地址</label>
                        <input type="email" id="email" name="email" required 
                               placeholder="请输入有效的邮箱地址">
                        <span class="field-error" id="emailError"></span>
                    </div>
                    
                    <div class="form-group">
                        <label for="password">🔒 密码</label>
                        <input type="password" id="password" name="password" required 
                               placeholder="请输入密码（至少6位）" 
                               minlength="6">
                        <span class="field-error" id="passwordError"></span>
                    </div>
                    
                    <div class="form-group">
                        <label for="confirmPassword">🔐 确认密码</label>
                        <input type="password" id="confirmPassword" name="confirmPassword" required 
                               placeholder="请再次输入密码">
                        <span class="field-error" id="confirmPasswordError"></span>
                    </div>
                    
                    <button type="submit" id="registerSubmitBtn" class="register-submit-btn">
                        <span class="btn-text">立即注册</span>
                        <span class="btn-loading" style="display: none;">注册中...</span>
                    </button>
                </form>
                
                <div id="registerResult" class="register-result"></div>
                
                <div class="register-footer">
                    <p>已有账号？ <a href="#" class="login-link">立即登录</a></p>
                </div>
            </div>
        </section>
    </main>

    <script src="script.js"></script>
</body>
</html>